<template>
  <div class="box">
     <div class="collection-box">
         <van-tabs v-model="active" animated>
            <van-tab v-for="(item,index) in collectionLIst" :key="index" :title="item.title">
                <ul class="collection-list-box pa-20">
                    <li class="list-item" v-for="(value,key) in item.list" :key="key">
                        <router-link to="">
                            <div class="item-img">
                                <img :src="value.img" alt="">
                                <div class="item-marker" v-show="value.failure==1">商品已失效</div>
                            </div>
                            <div class="item-content">
                                <h3 class="content-title multi-line">{{value.name}}</h3>
                                <p class="content-num">{{value.collectionNum}}人收藏</p>
                                <div class="content-price">
                                    <div class="price">
                                        ￥<b>{{value.price}}</b>
                                        <del>原价{{value.oldPrice}}</del>
                                    </div>
                                    <img src="@/assets/images/icon-del.png" alt="">
                                </div>
                            </div>
                        </router-link>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>
     </div>
  </div>
</template>

<script>
import collectionImg1 from '@/assets/temporary/collection-item-img1.png'
export default {
    name:'Collection',
    data(){
        return{
            active:0,
            collectionLIst:[
                {title:'全部',
                    list:[
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:0},
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:0},
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:1}
                    ]
                },
                {title:'景点门票',
                    list:[
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:0},
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:0},
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:1}
                    ]
                },
                {title:'休闲娱乐',
                    list:[
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:0},
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:0},
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:1}
                    ]
                },
                 {title:'精品线路',
                    list:[
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:0},
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:0},
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:1}
                    ]
                },
                 {title:'文创特产',
                    list:[
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:0},
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:0},
                        {name:'郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票',img:collectionImg1,collectionNum:150,price:239.2,oldPrice:280,failure:1}
                    ]
                },
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
 @import "@/assets/css/public";
.box{
    background-color: $gray_bg;
}
.collection-list-box{
    .list-item{
        padding:vw(30) vw(20);
        height: vw(280);
        border-radius: vw(10);
        margin-bottom:vw(20);
        background-color: #fff;
        box-sizing: border-box;
        >a{
            display: flex;
            justify-content: space-between;
             .item-img{
                position: relative;
                width: vw(220);
                height:vw(220);
                border-radius: vw(10);
                overflow: hidden;
                margin-right:vw(20);
                >img{
                    width: 100%;
                }
                .item-marker{
                    position: absolute;
                    left: 0;
                    top:0;
                    width: 100%;
                    line-height: vw(220);
                    border-radius: vw(10);
                    background-color: rgba(0,0,0,.6);
                    text-align: center;
                    color: #fff;
                    font-size: vw(28)
                }
            }
            .item-content{
                flex:1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding-top:vw(10);
                 font-size: vw(28);
                .content-title{
                    font-size: vw(28);
                    line-height: vw(42);
                   -webkit-line-clamp: 2;
                }
                .content-num{
                    margin-bottom:vw(27);
                    color: #999;
                }
                .content-price{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .price{
                        color:$org_font;
                        b{
                            font-size: vw(42);
                        }
                        del{
                            margin-left: vw(15);
                            color: #999;
                            font-size: vw(20)
                        }
                    }
                    
                    img{
                        width: vw(30);
                    }
                }
            }
        }
        
       
    }
}
</style>